let i = 0
const big = document.querySelectorAll('.tab-nav2 .big')
const nav2 = document.querySelector(".tab .tab-nav2")
const lists = document.querySelectorAll('.tab-content .item')

timer = setInterval(function () {
    for (let k = 0; k < big.length; k++) {
        big[k].classList.remove('active')
    }
    // const actEle = document.querySelector('.tab-nav2 .active')
    // if (actEle) {
    //     actEle.classList.remove('active')
    // }
    big[i].classList.add('active')
    for (let k = 0; k < lists.length; k++) {
        lists[k].style.display = 'none'
    }
    lists[big[i].dataset.id].style.display = 'block'
  
    if (i >= 3) {
        i = -1
    }
    i++
}, 1000)


function render2(e) {
    clearInterval(timer)
    const { className } = e.target
    let node = null
    if (className) {
        if (className !== 'big') {
            node = e.target.parentNode
        } else {
            node = e.target
        }
        const actEle = document.querySelector('.active')
        if (actEle) {
            actEle.classList.remove('active')
        }
        node.classList.add('active')
        for (let k = 0; k < lists.length; k++) {
            lists[k].style.display = 'none'
        }
        const id = node.dataset.id
        lists[id].style.display = 'block'
    }

setTimeout(function () {
        i = node.dataset.id
       timer = setInterval(function () {
            for (let k = 0; k < big.length; k++) {
                big[k].classList.remove('active')
            }
            console.log(i);
            big[i].classList.add('active')
            for (let k = 0; k < lists.length; k++) {
                lists[k].style.display = 'none'
            }
            lists[big[i].dataset.id].style.display = 'block'
            if (i >= 3) {
                i = -1
            }
            i++
        }, 1000)
    }, 1000)
}
nav2.addEventListener('click', render2)
// 

// -----------------------------------------------------------------------------


// 分开

let j = 0
const big1 = document.querySelectorAll('.tab-nav21 .big1')
const nav21 = document.querySelector(".tab1 .tab-nav21")
const lists1 = document.querySelectorAll('.tab-content1 .item1')



timer1 = setInterval(function () {
    for (let y = 0; y < big1.length; y++) {
        big1[y].classList.remove('active')
    }
    // const actEle = document.querySelector('.tab-nav2 .active')
    // if (actEle) {
    //     actEle.classList.remove('active')
    // }
    big1[j].classList.add('active')
    for (let y = 0; y < lists1.length; y++) {
        lists1[y].style.display = 'none'
    }
    lists1[big1[j].dataset.id].style.display = 'block'
  
    if (j >= 3) {
        j = -1
    }
    j++
}, 1000)


function render21(e) {
    clearInterval(timer1)
    const { className } = e.target
    let node1 = null
    if (className) {
        if (className !== 'big1') {
            node1 = e.target.parentNode
        } else {
            node1 = e.target
        }
        const actEle1 = document.querySelector('.tab1 .active')
        if (actEle1) {
            actEle1.classList.remove('active')
        }
        node1.classList.add('active')
        for (let y = 0; y < lists1.length; y++) {
            lists1[y].style.display = 'none'
        }
        const id1 = node1.dataset.id
        lists1[id1].style.display = 'block'
    }

    setTimeout(function () {
        j = node1.dataset.id
       timer1 = setInterval(function () {
            for (let y = 0; y < big1.length; y++) {
                big1[y].classList.remove('active')
            }
            big1[j].classList.add('active')
            for (let y = 0; y < lists1.length; y++) {
                lists1[y].style.display = 'none'
            }
            lists1[big1[j].dataset.id].style.display = 'block'
            if (j >= 3) {
                j = -1
            }
            j++
        }, 1000)
    }, 1000)
}
nav21.addEventListener('click', render21)










// big1[j].click()
// timer1 = setInterval(function () {
//     j++
//     big1[j].click()
//     if (j >= 3) {
//         j = -1
//     }
// }, 1000)
// for (let j = 0; j < nav21.length; j++) {
//     nav21[j].addEventListener('mouseenter', function () {
//         clearInterval(timer1)
//     })
//     nav21[j].addEventListener('mouseleave', function () {
//         timer1 = setInterval(function () {
//             j++
//             big1[j].click()
//             if (j >= 3) {
//                 j = -1
//             }
//         }, 1000)
//     })
// }



// function render1() {
//     for (let j = 0; j < nav21.length; j++) {
//         nav21[j].addEventListener('click', function (e) {
//             const { className } = e.target
//             let node1 = null
//             if (className) {
//                 if (className !== 'big1') {
//                     node1 = e.target.parentNode
//                 } else {
//                     node1 = e.target
//                 }
//                 const actEle1 = document.querySelector('.tab1 .active')
//                 if (actEle1) {
//                     actEle1.classList.remove('active')
//                 }
//                 node1.classList.add('active')
//                 for (let j = 0; j < lists1.length; j++) {
//                     lists1[j].style.display = 'none'
//                 }
//                 const id1 = node1.dataset.id
//                 lists1[id1].style.display = 'block'
//             }
//         })
//     }

// }
// render1()















const arr = [
    { h2: '中国丝绸文化游历周', p: '南瓜科学 x 中国丝绸博物馆' },
    { h2: '“小小航海家”神秘探究之旅', p: '南瓜科学 x 中国港口博物馆' },
    { h2: '“在线游”北京汽车博物馆', p: '南瓜科学 x 北京汽车博物馆' },
    { h2: '冬奥冰雪运动季', p: '南瓜科学携手冬奥冠军 x 央视频' },
    { h2: '“地质与宝石”寻宝节', p: '南瓜科学 x 中国地质博物馆' }
]
let index = 0;
function lunbo() {
    //判断number是否大于3
    index++;
    if (index >= 5) {
        index = 0;
    }
    //获取img对象
    let img = document.querySelector(".part5 .w .swiper .lunbo");
    img.style.background = `url(../images/pumpkin-img/img${index}.jpg)`;
    img.style.backgroundSize = "100% 100%";
    document.querySelector('.part5 .w .swiper .rights .title h2').innerHTML = arr[index].h2
    document.querySelector('.part5 .w .swiper .rights .title p').innerHTML = arr[index].p
    // console.log(index);

}
//2.定义定时器
setInterval(lunbo, 2000);